<template>
	<!-- cloud & tree -->
	<div class="cloud">
		<!-- 云 -->
		<div class="clod-l"></div>
		<div class="clod-r"></div>
		<!-- 树 -->
		<div class="tree-l"></div>
		<div class="tree-r"></div>
	</div>
</template>

<script>
</script>

<style lang="scss">
	@function px2vw($px){
		@return $px/7.5*1vw
	};
	.cloud{
		width: 100%;
		height: px2vw(432);
		margin-top: px2vw(416);
		position: relative;
		z-index: 9;
	}
	.clod-l{
		width: px2vw(90);
		height: px2vw(66);
		background-image: url(../../images/images/cloud-1_02.png);
		background-repeat: no-repeat;
		background-size: px2vw(90) px2vw(66);
		position: absolute;
		bottom: 0;
		left: 0;
		
		animation: cloud_l 1s;
		animation-timing-function: linear;
		animation-iteration-count:1;
		animation-direction: normal;
	}
	@keyframes cloud_l{
		0%{
			left: px2vw(-88);
		}
		100%{
			left: 0;
		}
	}
	.clod-r{
		width: px2vw(105);
		height: px2vw(44);
		background-image: url(../../images/images/cloud-r_06.png);
		background-repeat: no-repeat;
		background-size: px2vw(105) px2vw(44);
		position: absolute;
		right: 0;
		
		animation: clod_r 1s;
		animation-timing-function: linear;
		animation-iteration-count:1;
		animation-direction: normal;
	}
	@keyframes clod_r{
		0%{
			right: px2vw(-105);
		}
		100%{
			right: 0;
		}
	}
	.tree-l{
		width: px2vw(203);
		height: px2vw(318);
		background-image: url(../../images/images/tree-1_02.png);
		background-repeat: no-repeat;
		background-size: px2vw(203) px2vw(318);
		position: absolute;
		left: 0;
		top: px2vw(13);
		z-index: 99;
		
		animation: tree_l 1s;
		animation-timing-function: linear;
		animation-iteration-count:1;
		animation-direction: normal;
	}
	@keyframes tree_l{
		0%{
			left: px2vw(-203);
		}
		100%{
			left: 0;
		}
	}
	.tree-r{
		width: px2vw(188);
		height: px2vw(211);
		background-image: url(../../images/images/tree-r_07.png);
		background-repeat: no-repeat;
		background-size: px2vw(188) px2vw(211);
		position: absolute;
		right: 0;
		bottom: 0;
		z-index: 99;
		
		animation: tree_r 1s;
		animation-timing-function: linear;
		animation-iteration-count:1;
		animation-direction: normal;
	}
	@keyframes tree_r{
		0%{
			right: px2vw(-188);
		}
		100%{
			right: 0;
		}
	}
</style>
